<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Data Tables</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/dist/css/font-awesome.min.css}">
  <!-- Ionicons -->
  <link rel="stylesheet" th:href="@{/dist/css/ionicons.min.css}">
  <!-- DataTables -->
  <link rel="stylesheet" th:href="@{/plugins/bootstrap-table/css/bootstrap-table.min.css}">
  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}">
   <link th:href="@{/css/animate.css}" rel="stylesheet">
  <link rel="stylesheet" th:href="@{/css/common.css}">
   <link th:href="@{/css/animate.css}" rel="stylesheet">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style type="text/css">
   .thClass {
   		text-align: center;
   }
  </style>
</head>
<body class="no-skin">
<div class="wrapper">
  <div class="content-wrapper animated fadeInRight">
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
         <div class="box-header">
              <h3 class="box-title">流程列表</h3>
            </div> 
            <div class="box-body">
	            <div style="margin: 5px 0px 2px 0px;padding: 5px 4px;background: #e7eaec;border-radius: 4px">
                 		<button class="btn btn-success  btn-sm" type="button" onclick="addRole()"><i class="fa fa-plus"></i>&nbsp;&nbsp;<span class="bold">新增</span> </button>
                 		<button class="btn btn-warning btn-sm" type="button" onclick="menuToRole()"><i class="fa fa-odnoklassniki-square"></i>&nbsp;&nbsp;<span class="bold">授权</span> </button>
	            	<!--  <shiro:hasPermission name="sys:role:add">
                 		<button class="btn btn-success  btn-sm" type="button" onclick="addRole()"><i class="fa fa-plus"></i>&nbsp;&nbsp;<span class="bold">新增</span> </button>
               		 </shiro:hasPermission>
               		 <shiro:hasPermission name="sys:role:update">
                 		<button class="btn btn-info  btn-sm" type="button" onclick="editRole()"><i class="fa fa-paste"></i>&nbsp;&nbsp;<span class="bold">编辑</span> </button>
               		 </shiro:hasPermission>
               		 <shiro:hasPermission name="sys:role:menuToRole">
                 		<button class="btn btn-warning btn-sm" type="button" onclick="menuToRole()"><i class="fa fa-odnoklassniki-square"></i>&nbsp;&nbsp;<span class="bold">授权</span> </button>
               		 </shiro:hasPermission>
               		 <shiro:hasPermission name="sys:role:delete">
                 		<button class="btn btn-danger btn-sm" type="button" onclick="deleteRole()"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;<span class="bold">删除</span> </button>
               		 </shiro:hasPermission> -->
	            </div>
                <table class="table table-bordered" data-height="auto" data-mobile-responsive="true"> 
                	<thead>
						<tr>
							<th class="thClass">流程ID</th>
							<th class="thClass">流程标识</th>
							<th class="thClass">流程名称</th>
							<th class="thClass">流程版本</th>
							<th class="thClass">部署时间</th>
						</tr>
					</thead>
					<tbody>
							<tr th:each="p:${page}">
								<td class="thClass" th:text="${p.id}"></td>
								<td class="thClass" th:text="${p.processDefinition.key}"></td>
								<td class="thClass" th:text="${p.processDefinition.name}"></th>
								<td class="thClass" th:text="${p.processDefinition.version}"></td>
								<td class="thClass" th:text="${#dates.format(p.deployment.deploymentTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
							</tr>
					</tbody>
                </table> 
             
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
   <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 2.2.3 -->
<script th:src="@{/plugins/jQuery/jquery-2.2.3.min.js}"></script>
<script th:src="@{/plugins/layer/layer.js}"></script>
<!-- Bootstrap 3.3.6 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{/plugins/bootstrap-table/js/bootstrap-table.min.js}"></script>
<script th:src="@{/plugins/bootstrap-table/js/extensions/mobile/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/plugins/bootstrap-table/js/locale/bootstrap-table-zh-CN.min.js}"></script>
    <!-- Peity -->
<script th:src="@{/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/plugins/fastclick/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/app.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"></script>
<script th:src="@{/js/act/processList.js}"></script>
<script th:src="@{/js/common/dateutil.js}"></script>
<!-- page script -->
<script>
</script>
</body>
</html>
